<div class="upload-container" [class.disabled]="disabled()">
  @if (!filesControl.value && !preview()) {
  <!-- 上传区域 -->
  <label tuiInputFiles class="upload-area">
    <input tuiInputFiles [formControl]="filesControl" [accept]="acceptString()"
      [attr.disabled]="disabled() ? true : null" />

    <ng-template>
      <div class="upload-placeholder">
        <app-upload-icon width="40" height="40"></app-upload-icon>
        <div class="upload-text">
          <p>{{ label() }}</p>
          <p class="upload-hint">
            支持的格式: {{ acceptString() }}
          </p>
          <p class="upload-hint">最大文件大小: {{ maxSizeMB() }}MB</p>
        </div>
      </div>
    </ng-template>
  </label>
  } @else {
  <!-- 文件预览 -->
  <div class="preview-container">
    <!-- 添加loading遮罩 -->
    @if (isLoading()) {
    <div class="loading-overlay">
      <div class="spinner"></div>
      <p>上传中...</p>
    </div>
    }

    <!-- 图片预览 -->
    <div class="image-preview">
      <img [src]="preview()" alt="预览图片" (click)="openFullPreview()" />
    </div>

    <!-- 操作按钮 -->
    <div class="preview-actions">
      <button class="preview-button view-button" (click)="openFullPreview()" *ngIf="!disabled()">
        <app-view-icon width="16" height="16"></app-view-icon>
        查看
      </button>
      <button class="preview-button delete-button" (click)="deleteImage()" *ngIf="!disabled()">
        <app-delete-icon width="16" height="16"></app-delete-icon>
        删除
      </button>
    </div>
  </div>
  }
  <app-image-preview [imageUrl]="preview()" [show]="showPreview()" (closed)="closePreview()">
  </app-image-preview>
</div>